@model ListDictionariesViewModel
@{
    ViewData.SetLayoutModel(new LayoutModel(nameof(ServerNavPages.Translations), StringLocalizer["Dictionaries"])
        .SetCategory(WellKnownCategories.Server));
}

<div class="sticky-header">
	<h2>@ViewData["Title"]</h2>
	<div class="d-flex gap-2">
		<button type="button" class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#downloadLanguagePackModal" text-translate="true">
			Download language pack
		</button>
		<a id="page-primary" asp-action="CreateDictionary" class="btn btn-primary" role="button" text-translate="true">
			Create
		</a>
	</div>
</div>
<partial name="_StatusMessage" />

<p class="mb-0" text-translate="true">
	Dictionaries enable you to translate the BTCPay Server backend into different languages.
</p>

<div class="table-responsive">
	<table class="table table-hover">
		<thead>
			<tr>
				<th text-translate="true">Dictionary</th>
				<th text-translate="true">Fallback</th>
				<th class="actions-col"></th>
			</tr>
		</thead>
		<tbody>
			@foreach (var v in Model.Dictionaries)
			{
				<tr>
					<td class="d-flex flex-wrap align-items-center gap-2">
						@if (!v.Editable)
						{
							<span >@v.DictionaryName</span>
						}
						else
						{
							<a asp-action="EditDictionary" asp-route-dictionary="@v.DictionaryName">@v.DictionaryName</a>
						}
                        @if (v.IsSelected)
                        {
                            <span class="badge bg-info" text-translate="true">
                                In use
                            </span>
                        }
					</td>
					<td>@v.Fallback</td>
					<td class="actions-col">
						<div class="d-inline-flex align-items-center gap-3">
							<a asp-action="CreateDictionary" asp-route-fallback="@v.DictionaryName" text-translate="true">Clone</a>
							@if (!v.IsSelected)
							{
								<a id="Select-@v.DictionaryName" asp-action="SelectDictionary" asp-route-dictionary="@v.DictionaryName" text-translate="true">Select</a>
							}
							@if (v.Editable && !v.IsSelected)
							{
								<a id="Delete-@v.DictionaryName" asp-action="DeleteDictionary" asp-route-dictionary="@v.DictionaryName" data-bs-toggle="modal" data-bs-target="#ConfirmModal" data-description="The dictionary <b>@Html.Encode(v.DictionaryName)</b> will be removed from this server." data-confirm-input="@StringLocalizer["Delete"]" text-translate="true">Remove</a>
							}
						</div>
					</td>
				</tr>
			}
		</tbody>
	</table>
	<partial name="_Confirm" model="@(new ConfirmModel(StringLocalizer["Delete dictionary"], StringLocalizer["This dictionary will be removed from this server."], StringLocalizer["Delete"]))" />
</div>

@* Download Language Pack Modal *@
<div class="modal fade" id="downloadLanguagePackModal" tabindex="-1" role="dialog" aria-labelledby="downloadLanguagePackModalTitle" aria-hidden="true" data-bs-backdrop="static">
	<div class="modal-dialog modal-dialog-centered" role="document">
		<form method="post" asp-action="DownloadLanguagePack">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title" id="downloadLanguagePackModalTitle" text-translate="true">Download Language Pack</h5>
					<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
						<vc:icon symbol="close" />
					</button>
				</div>
				<div class="modal-body">
					<p text-translate="true">Select a language to download from the community translation repository.</p>
					<p class="mb-3">
						<span text-translate="true">These translations are maintained by the community at</span>
						<a href="https://github.com/btcpayserver/btcpayserver-translator" target="_blank" rel="noopener noreferrer">btcpayserver-translator</a>.
					</p>
					<div class="form-group">
						<label for="language" class="form-label" text-translate="true">Select Language</label>
						<select id="language" name="language" class="form-select" required>
							<option value="" text-translate="true">Choose a language...</option>
							<option value="Dutch">Dutch</option>
							<option value="French">French</option>
							<option value="German">German</option>
							<option value="Hindi">Hindi</option>
							<option value="Indonesian">Indonesian</option>
							<option value="Italian">Italian</option>
							<option value="Japanese">Japanese</option>
							<option value="Korean">Korean</option>
							<option value="Portuguese (Brazil)">Portuguese (Brazil)</option>
							<option value="Russian">Russian</option>
							<option value="Serbian">Serbian</option>
							<option value="Spanish">Spanish</option>
							<option value="Thai">Thai</option>
							<option value="Turkish">Turkish</option>
						</select>
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-secondary" data-bs-dismiss="modal" text-translate="true">Cancel</button>
					<button type="submit" class="btn btn-primary" text-translate="true">Download</button>
				</div>
			</div>
		</form>
	</div>
</div>
